<template>
  <el-row class="dataSource">
    <el-col :span="3">格式配置页面</el-col>
    <el-col :span="20">
      <el-table :data="dataSource" border style="width: 100%">
        <el-table-column prop="type" label="类型" />
        <el-table-column prop="font" label="字体" />
        <el-table-column prop="size" label="大小" />
        <el-table-column label="位置">
          <template #default="scope">
            <el-select v-model="scope.row.location" placeholder="Select">
              <el-option
                v-for="item in locationOption"
                :key="item.id"
                :label="item.label"
                :value="item"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="22"></el-col>
    <el-col :span="2">
      <el-button type="primary" @click="handle()" size="large"> 应用 </el-button>
    </el-col>
  </el-row>
</template>
<style scoped lang="scss">
.el-row {
  margin: 20px 0 40px 0;
}
</style>
<script setup lang="ts">
import { useFormatConfigStore } from '@/store'
const formatConfigStore = useFormatConfigStore()
const handle = () => {
  console.log('应用成功', dataSource)
  formatConfigStore.dataSource = dataSource.value
}
const locationOption = [
  {
    id: 1,
    value: 'center',
    label: '居中',
  },
  {
    id: 2,
    value: 'start',
    label: '左对齐',
  },
  {
    id: 3,
    value: 'end',
    label: '右对齐',
  },
]

const dataSource = ref(formatConfigStore.dataSource)
</script>

<style scoped lang="scss"></style>
